<template>
  <ul class="left-menu">
    <li
      v-for="item in list"
      :class="{ active: selectId == item.id }"
      :key="item.id"
      @click="change(item.id)"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
export default {
  props: {
    list: Array,
  },
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      selectId: 0,
    });
    const change = (id) => {
      console.log(id);
      data.selectId = id;
      ctx.emit("change", id);
      //把点击的id传到父组件
    };
    return { ...toRefs(data), change };
  },
};
</script>

<style lang="scss" scoped>
.left-menu {
  width: 100%;
  li {
    height: 36px;
    text-align: center;
    line-height: 36px;
    color: #675d56;
    font-size: 14px;
    border-left: 3px solid rgba(0, 0, 0, 0);
  }
  .active {
    border-left: 3px solid #d41515;
    color: #d41515;
  }
}
</style>
